<template>
	<view class="bigBox">
		<view class="box">
			<view class="boxHeader">
				<view class="itemHeader">总金额(元)</view>
				<view class="itemMess">0.00</view>
				<view class="itemHint">今日收益<view class="boxHeaderText">0.00</view>
				</view>
			</view>
			<view class="boxHeader" style="text-align: right;margin-top: 120upx;">
				<view class="itemHint">累计收益<view class="boxHeaderText">0.00</view>
				</view>
			</view>
		</view>
		<view class="fundItem" v-for="item in holdFunds" :key="item.name">
			<view class="fundTitle">{{item.name}}</view>
			<view class="fundMess">
				<view>
					<view class="messTitle">金额(元)</view>
					<view class="messNum">{{item.hold}}</view>
				</view>
				<view>
					<view class="messTitle">今日收益(元)</view>
					<view class="messNum">{{item.TodayEarnings}}</view>
				</view>
				<view>
					<view class="messTitle">累计收益(元)</view>
					<view class="messNum">{{item.accumulated}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				holdFunds: [{
						name: '汇添富双利卷A',
						hold: '500',
						TodayEarnings: '0.00',
						accumulated:'15.20'
					},
					{
						name: '宏康小金罐',
						hold: '600',
						TodayEarnings: '0.00',
						accumulated:'20.51'
					}
				]
			}
		},
		methods:{
		}
	}
</script>

<style lang="scss">
	.bigBox {
		.box {
			background-color: #FFFFFF;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			padding: 100upx 0 60upx 0;

			.boxHeader {
				width: 35vw;

				.itemHeader {
					font-size: 30upx;
					color: #999999;
				}

				.itemMess {
					font-size: 46upx;
					color: #333333;
					font-weight: bold;
					margin-top: 24upx;
				}

				.itemHint {
					font-size: 26upx;
					color: #999999;
					margin-top: 38upx;

					.boxHeaderText {
						margin-left: 20upx;
						font-size: 34upx;
						color: #333333;
						display: inline-block;
					}
				}
			}
		}
		
		.fundItem{
			width: 95vw;
			margin: 15upx auto;
			border-radius: 20upx;
			background-color: #ffffff;
			padding: 30upx;
			.fundTitle{
				font-size: 28upx;
				color: #333333;
				font-weight: bold;
				margin-bottom: 40upx;
			}
			.fundMess{
				display: flex;
				justify-content: space-between;
				.messTitle{
					font-size: 24upx;
					color: #999999;
				}
				.messNum{
					text-align: center;
					margin-top: 18upx;
					font-size: 28upx;
					color: #333333;
				}
			}
		}
	}
</style>
